import React from 'react';
import { toJS } from 'mobx'
import { Tools, Icon, Button, Avatar, List } from 'weaver-mobile';
import { Upload, ListViewPage, Reply, CKTextarea, CKRichText, RouteLayout } from 'weaver-mobile-page';
import QueueAnim from 'rc-queue-anim';
import { withRouter, Route } from 'react-router-dom';
import { openHrmCard } from '../../util'
import { WrShow } from '../index'
const getLabel = Tools.getLabel

//反馈信息
export const WrFeedback = ({ fbReplyStore, fbList, onSubmit, leftConfig, showReply = true }) => {
    const prefixClass = 'workrelate-mobile-feedback-';
    return (
        <div className={`${prefixClass}container`}>
            {fbList && fbList.map((f, i) => {
                if (f) {
                    return <QueueAnim delay={300} key={`ani${i}`}>
                        <div className={`${prefixClass}card`} key={`${i}`}>
                            <div className={`${prefixClass}card-header`}>
                                <div className={`${prefixClass}card-header-avator`}>
                                    {/* <Avatar
                                        url={f.userImageUrl}
                                        name={f.hrmname}
                                        type="2"
                                    /> */}
                                    <Avatar userId={f.hrmid}/>
                                </div>
                                <div className={`${prefixClass}card-header-text`}>
                                    <div className={`${prefixClass}card-header-text-nickname`}>
                                        <a href="javaScript:void(0)" onClick={() => openHrmCard(f.hrmid)} style={{ marginRight: '2px' }}>
                                            {f.hrmname}
                                        </a>

                                    </div>
                                    <div className={`${prefixClass}card-header-text-dep`}>
                                        {f.dep}
                                    </div>
                                </div>
                            </div>
                            <div className={`${prefixClass}card-content`} dangerouslySetInnerHTML={{ __html: f.content }}>
                                {/* {f.content} */}
                            </div>
                            <div className={`${prefixClass}card-footer`}>
                                <div className={`${prefixClass}card-footer-date`}>{f.datetime || f.operatedate}</div>
                            </div>
                        </div>
                    </QueueAnim>
                }

            })}
            {fbList && fbList.length>0 && 
            
            <div class="am-list-footer">
                <div class="wm-list-view-page-modal-nomore">
                    <span class="wm-list-view-page-modal-nomore-line-left"></span>
                    <span class="wm-list-view-page-modal-nomore-line-name">{getLabel(390064, '没有更多啦')}</span>
                    <span class="wm-list-view-page-modal-nomore-line-right"></span>
                </div>
            </div>
            }
            <WrShow show={showReply}>
                <Reply
                    store={fbReplyStore}
                    leftConfig={leftConfig}
                    showOutInput
                    placeholder={getLabel('83869', '请输入')}
                    onSubmit={(datas) => {
                        let c = document.getElementsByClassName("wm-reply-mask")[0]
                        if (c) {
                            c.parentNode.removeChild(c)
                        }
                        onSubmit(datas)
                    }} // 提交的时候，如果需要清空数据，调用store的doClear方法
                />
            </WrShow>
        </div>
    )
}
export default WrFeedback;